<template>
    <div>
        <h1>柱状图</h1>
        <el-collapse accordion>
            <el-collapse-item title="基本柱状图" name="1">
                <template #title>
                    <h2>基本柱状图<a href="https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar">#</a>
                    </h2>
                </template>
                <Case1 />
                <br>
                <Case2 />
                <br>
                <Case3 />
            </el-collapse-item>
            <el-collapse-item title="堆叠柱状图" name="2">
                <template #title>
                    <h2>堆叠柱状图<a href="https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/stacked-bar">#</a>
                    </h2>
                </template>
                <Case4 />
            </el-collapse-item>
            <el-collapse-item title="动态排序柱状图" name="3">
                <template #title>
                    <h2>动态排序柱状图<a href="https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/bar-race">#</a>
                    </h2>
                </template>
                <Case5 />
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
    import Case1 from './BarCase1.vue';
    import Case2 from './BarCase2.vue';
    import Case3 from './BarCase3.vue';
    import Case4 from './BarCase4.vue';
    import Case5 from './BarCase5.vue';
</script>

<style lang="scss" scoped></style>
